import Vue from 'vue'
import Vuex from 'vuex'


// 已经抽离出去的store属性
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import moduleA from './modules/moduleA'

// 1. 安装插件 >>> 底层会执行插件的install方法
Vue.use(Vuex);

// 2. 创建一个Vuex实例对象 >>> Vuex.Store
// 根组织state
const state = {
  // 这些属性都会被加入到响应式系统中, 而响应式系统会监听属性是否变化, 当属性发生变化时, 会通知所有界面中用到该属性的地方, 进行刷新
  counter: 1000,
  students: [
    { id: 1, name: 'Mr.chen', age: 16 },
    { id: 2, name: 'Mr.xiao', age: 28 },
    { id: 3, name: 'Mr.wang', age: 20 },
    { id: 4, name: 'Mr.cao', age: 26 }
  ],
  info: {
    name: 'kobe',
    age: 50,
    height: 1.98
  }
}

const store = new Vuex.Store({
  // 保存状态
  state,
  // 修改同步提交方法 [commit]
  mutations,
  // 异步操作事件提交
  actions,
  // 类似Vue组件中的computed[计算属性]
  getters,
  // 模块划分: 内部可以定义多个对象, 对象内又可以定义state、mutations、actions、getters... [套娃]
  modules: {
    moduleA,
    moduleB: {
      // ...
    }
  }
})

// 3. 导出当前Vuex实例对象
export default store
